طريقة إضافة صندوق الاشتراك في القائمة البريدية للمدونة بشكل جميل وبسهولة تامة

السلام عليكم ورحمة الله وبركاته

إن شاء الله نقدم لكم إخواني وأخواتي وهي

طريقة إضافة صندوق الاشتراك في القائمة البريدية للمدونة 

بشكل جميل وبسهولة تامة

والذي يسهل للزوار الاشتراك عن طريقه في خلاصة المدونة وبالتالي استلام نشرة دورية لمواضيع مدونتك المتجددة

على إيميلاتهم

نبدأ بسم الله

اذهب للوحة تحكم مدونتك من هنا

ومن ثم إلى التخطيط ثم إضافة أداة

ثم إضافة أداة وظيفة طرف ثالث HTML/JavaScript

وضع الكود التالي في المربع

<div class='clear'></div><div class='widget HTML' id='HTML1'> <div class='widget-content'> <center><div class="sub"> <h5>ضع إيميلك ليصلك كل جديد المدونة</h5> <div class="ins"> <div id='sleek-subscribe'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=nahrelma3refa' class='signform' method='post' target='_new'> <input class='txt2' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;ضع اميلك هنا&apos;;}' onfocus='if (this.value == &apos;ضع اميلك هنا&apos;) {this.value = &apos;&apos;;}' value='ضع اميلك هنا'/> <input class='btn2' type='submit' value=' '/> </form> </div> </div> </div> <style>.sub{width:300px;height:130px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwaUll2Ku8D8ogW_Ysiycm9Dc5KDJGxsohIgNh-2_XHl3fy0htk3lMVWP5GjPHnjlCt-S2_woCWmUuazl7sMBKeSaNTgfooJbu4kVz1zRthPtY0dzSufgpuIKGsOK3pwpvftddCzL1Uxg/s1600/bg.png);}.sub h5{color:#2d2d2d;font:22px arial;margin:0;padding:25px 0 0 0;text-align:center;}.sub .ins{width:261px;height:35px;margin:12px auto 0;}.sub .ins .txt2{border:1px solid #E1E1E1;background:white;font:12px Tahoma,Geneva,sans-serif;color:silver;padding:10px 7px 9px 7px;margin:0px;float:right;text-align:right;width:136px;}.sub .ins .btn2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheXYs_Bu7iPscD6P58N-pMPgGpcRgM1JIaOxOy11cI-0r7-yYHGQYnhWh6lnC_iz1TFC-R-Urj_yt6CDXpBZ0OVrF53qK3hclkkelFih8e-Hcw-f3PmTkmUs3YFG2uvtmPbsITu8yJtbM/s1600/send.png);float:left;border:none;width:104px;height:33px;cursor:pointer;margin-top:1px;}</style></center> </div> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=4333142131555820750&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=sidebar-left-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='تحرير'> <img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span></span></div>

ثم غير nahrelma3refa بعنوان خلاصة مدونتك
واضغط حفظ

وحرك الأداة إلى مكان ترغب ظهور الأداة فيه

ومبروك عليك الإضافة
 دمتم في أمان الله 
 ولا تنسونا من صالح دعائكم
قسم / شروحات ومواقع (بلوجر أدسنس يوتيوب الربح)

mohamed

12:35 م

اقرأ المزيد

إضافة أداة مواضيع ذات صلة إلى مدونات بلوجر بطريقتين مختلفتين

إضافة أداة مواضيع ذات صلة إلى مدونات بلوجر بطريقتين مختلفتين

السلام عليكم ورحمة الله وبركاته

إن شاء الله نقدم لكم اليوم إخواني وأخواتي طريقتين لإضافة أداة

(مواضيع ذات صلة) أو (قد يعجبك هذا أيضا) 

أو (شاهد هذه المواضيع أيضا) أو (مواضيع أخرى قد تهمك)

بحسب ما يحلو لكل شخص أن يسميها

وطبعا فائدة هذه الأداة هي عرض مجموعة من المواضيع بطريقة عشوائية تظهر أسفل كل موضوع مما قد يجذب الزائر بعد قراءته للموضوع لقراءة موضوع آخر قد يفيده وهكذا

نبدأ بسم الله 

الطريقة الأولى 

وهي مشهورة جدا حيث يمكنك إضافة الأداة عن طريق موقع linkwithin والذي يسهل لك إضافة الأداة بأسهل الطرق

أولا : 

ادخل على هذا رابط الموقع من هنا linkwithin 

ثانيا :

اتبع الخطوات الآتية كما بالصور

وهذا هو شكل الإضافة

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

الطريقة الثانية

أولا :

احفظ نسحة من قالبك تحسبا لأي أخطاء

ثانيا :

اذهب للوحة تجكم المدونة ثم اختر قالب ثم تحرير HTML 

ثم ابحث داخل القالب عن هذا الكود

<data:post.body/>

قد تجد أكثر من واحد اختر الثاني في ترتيب الظهور

ثم ضع أسفل منه مباشرة الكود التالي

<!-- Related Posts with Thumbnails Code Start--> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<div id='related-posts'> 

<b:loop values='data:post.labels' var='label'> 

<b:if cond='data:label.isLast != &quot;true&quot;'> 

</b:if> 

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> 

<script type='text/javascript'> 

var currentposturl=&quot;<data:post.url/>&quot;; 

var maxresults=6; 

var relatedpoststitle=&quot;مواضيع أخرى قد تعجبك أيضا&quot;; 

removeRelatedDuplicates_thumbs(); 

printRelatedLabels_thumbs(); 

</script> 

</div><div style='clear:both'/> 

</b:if> 

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> 

<a href='http://nahrelma3refa.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://nahrelma3refa.blogspot.com' style='display:none;'>EfadaBlog</a> 

</b:if></b:if> 

<!-- Related Posts with Thumbnails Code End-->

غير nahrelma3refa  إلى عنوان مدونتك

ويمكنك تغيير مواضيع أخرى قد تعجبك أيضا حسب رغبتك

كما أن الرقم 6  هو عدد المواضيع التي ستظهر بالأداة يمكنك تعديله أيضا حسب رغبتك

ثالثا :

ابحث عن هذا الكود 

</head>

وضع قبله مباشرة الكود التالي

<!--Related Posts with thumbnails Scripts and Styles Start--> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<style type='text/css'> 

#related-posts { 

float:center; 

text-transform:none; 

height:100%; 

min-height:100%; 

padding-top:5px; 

padding-left:5px; 

} 

#related-posts h2{ 

font-size: 1.3em; 

font-weight: bold; 

color: black; 

font-family: Tahoma, Georgia, &#8220;Times New Roman&#8221;, Times, serif; 

margin-bottom: 0.75em; 

margin-top: 0em; 

padding-top: 0em; 

} 

#related-posts a{ 

color:black; 

} 

#related-posts a:hover{ 

color:black; 

} 

#related-posts  a:hover { 

background-color:#d4eaf2; 

} 

</style> 

<script src='http://sma-blogger.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> 

</b:if> 

<!--Related Posts with thumbnails Scripts and Styles End-->

لتظهر الأداة بهذا الشكل

مع ملاحظة أن هذه الأداة ستظهر عقب نهاية الموضوع مباشرة

أرجو أن تعجبكم الأداة إن شاء الله

 دمتم في أمان الله

 ولا تنسونا من صالح دعائكم 

قسم / شروحات ومواقع (بلوجر أدسنس يوتيوب الربح)

mohamed

11:07 ص

اقرأ المزيد

إضافة روابط الموضوع أسفل كل موضوع تلقائيا

إضافة روابط الموضوع أسفل كل موضوع تلقائيا

السلام عليكم ورحمة الله وبركاته

إن شاء الله نقدم لكم اليوم أداة قد تكون مهمة للكثير منا

وهي أضافة روابط مختصرة للموضوع  أسفل منه مباشرة بحيث تتيح للزائر نسخ رابط الموضوع أو كوده إن أراد نقله ونشره

تركيب الأداة سهل إن شاء الله

نبدأ بسم الله

أولا :

وقبل كل شيء بما أن الإضافة ستضاف داخل قالب المدونة فيتوجب عليك حفظ نسخة من قالبك تحسبا لأي أخطاء قد تحدث لا قدر الله

ثانيا :

توجه إلى لوحة تحكم مدونتك من هنا

ثم اختر قالب ثم تحرير HTML  ثم اضغط داخل صندوق القالب واضغط على CTRL+F 

وابحث في مربع البحث عن الوسم 

<data:post.body/>

إذا وجدت أكثر من واحد فالثاني هو المقصود

ثم ضع أسفل منه مباشرة الكود التالي

<b:if cond='data:blog.pageType == "item"'>

<p style='color: #ff5400;font-weight: bold;'>إذا أعجبك الموضوع يمكنك نسخ روابط الموضوع التالية ونشرها في موقعك </p>

<p style='color: #CF152A;font-weight: bold;'>رابط الموضوع:

</p><textarea cols='60' id='url' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #00aced;background:#ececec; height: 2.6em; width: 98%;' title='Click to highlight'><data:post.url/></textarea>

<br/><p style='color: #CF152A;font-weight: bold;'>كود الموضوع:</p>

<textarea cols='60' id='HTML-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #00aced;background:#ececec; height: 2.6em; width: 98%;' title='Click to highlight'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea>

<div style='text-align: right;font-size: x-small;'>

<a href='http://nahrelma3refa.blogspot.com/' target='_blank'><span style="color: #838383;">اقرأ أيضا</span></a></div></b:if>

يمكنك تغيير ما تحب من الجمل أو الألوان أو المقاسات
ولا تنسى تغيير nahrelma3refa  بعنوان مدونتك

ثم احفظ القالب
وإن شاء الأداة تعجبكم


دمتم في أمان الله   ولا تنسونا من صالح دعائكم  (قسم / شروحات ومواقع (بلوجر أدسنس يوتيوب الربح

mohamed

5:45 م

اقرأ المزيد

اجعل مدونتك أسرع مع هذا الكود وأهم النصائح لجعل المدونة أسرع

اجعل مدونتك أسرع مع هذا الكود وأهم النصائح لجعل المدونة أسرع

السلام عليكم ورحمة الله وبركاته

إن من أهم الأمور التي يحتاجها المدون أن تكون متوفرة لزوار مدونته

هي سهولة وسرعة البحث والتجول داخل مدونته

ولذا فهناك ملاحظات عديدة لابد من مراعاتها داخل مدونتك كي تسهل مهمة الزائر وتجعله أكثر قبولا للتواجد في مدونتك وبالتالي عدم الملل وتصفح المزيد من مواضيعك دون أدني صعوبة

ولذا فإن أهم عامل في تسهيل بحث الزائر هو تسريع تحميل المدونة بقدر الإمكان

*  فمن المؤسف أن بعض المدونين عندما يبدأون في إنشاء المدونات يبحثون بكثرة عن الكثير من الإضافات الجمالية للمدونة والتي تؤثر سلبا في سرعة المدونة وتصبح المدونة مملة فلذا عليك التريث قليلا قبل وضع أي إضافة ولابد أن تكون الإضافة مفيدة بالفعل لزوارك الكرام وتسهل لهم مهمتهم داخل مدونتك

*  كما أنه يتوجب عليك أيضا عند وضع الصور داخل مدونتك أن تقلل حجمها بقدر ما يمكن بحيث لا تفقد جودتها ورونقها حيث أن الصور تأخذ حيزا كبيرا وأصيلا داخل المدونة مما يطيل مدة تحميل المدونة
ولتسهيل هذا الأمر إليك هذا الموقع الرائع image optimizer الذي يسهل لك ضغط الصور لمساحة أقل بجودة جيدة فكل ما عليك هو رفع الصورة وتحديد أبعادها وجودتها المطلوبة ثم الضغط على optimize now وحمل الصورة إلى جهازك بسهولة تامة .
رابط الموقع : image optimizer

* وقد أوضحنا سلفا في تدوينة سابقة أحد الإضافات الهامة لزوار المدونة لتسهيل البحث على زوار المدونة  ألا وهي

إضافة زر الصعود لأعلى المدونة
وهذه الأداة لا تضيف سرعة للمدونة بقدر ما تضيف سهولة ومرونة للبحث بها وهو أمر غاية في الأهمية

وللتعرف على سرعة مدونتك يمكنك التوجه لهذا الموقع pingdom ووضع رابط مدونتكفي المربع المخصص بهذه الصيغة www.nahrelma3refa.blogspot.com واختبار سرعتها

إضافة اليوم

* واليوم نقدم لكم إضافة جميلة ومهمة لتسريع تحميل المدونة بصورة أفضل وتسهيل سرعة تصفحها من قبل الزائر

نبدأ بسم الله

أولا :

وقبل كل شيء بما أن الإضافة ستضاف داخل قالب المدونة فيتوجب عليك حفظ نسخة من قالبك تحسبا لأي أخطاء قد تحدث لا قدر الله

ثانيا :

توجه إلى لوحة تحكم مدونتك من هنا

ثم اختر قالب ثم تحرير HTML  ثم اضغط داخل صندوق القالب واضغط على CTRL+F 

وابحث في مربع البحث عن الوسم 

</body>

ثم أضف قبله مباشرة الكود التالي

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/> <script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function($){ if (navigator.platform == "iPad") return; jQuery('img').lazyload({ effect:"fadeIn", 　 placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAypK5slS793-JT3t6UCBLskxGamO541MoAeU74K2mxFDXInx6KXHI2xEqqBiLwb9KL10aUW_QSb7Rj3ZJtyXEtmMEfkvN1Px5sUk3G1QiTmC8Gpmu1oeHpHMTvzjF3zvfXTyt9nC0xgU/" }); }); </script> ثم احفظ القالب وإن شاء الله ستجد فرقا في سرعة مدونتك
دمتم في أمان الله   ولا تنسونا من صالح دعائكم  (قسم / شروحات ومواقع (بلوجر أدسنس يوتيوب الربح

mohamed

6:39 م

اقرأ المزيد

إضافة أداة صندوق الإعجاب بصفحة الفيس بوك على مدونات بلوجر

إضافة أداة صندوق الإعجاب بصفحة الفيس بوك على مدونات بلوجر

السلام عليكم ورحمة الله وبركاته 

إن شاء الله نقدم لكم اليوم اخواني واخواتي

كيفية إضافة أداة قد تكون مفيدة للكثيرين ممن يملكون صفحات على الفيس بوك

ويريدون دعوة متابعيهم وزوارهم على المدونة للاعجاب بها دون الذهاب إلى الفيس بوك

وهي إضافة صندوق الإعجاب بصفحة الفيس بوك على مدونات بلوجر

نبدأ بسم الله

اذهب للوحة تحكم مدونتك ثم التخطيط ثم اختر إضافة أداة

 ثم إضافة أداة وظيفة طرف ثالث HTML/JavaScript

ثم انسخ الكود التالي
وقم بوضعه داخل مربع كود الأداة 

<div class="Pages" style="width: 294px; height: 298px;">
<div class="Page" style="height: 302px; overflow: auto; display: block;"> <div class="Pad">
<p align="center"> <a href="https://www.facebook.com/nahrelma3refa"> <iframe src="//www.facebook.com/plugins/likebox.php?href= https://www.facebook.com/nahrelma3refa &amp;width=290&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:265px;" allowtransparency="true"></iframe></a></p>
</div></div> </div> ثم قم بتغيير كلمة nahrelma3refa  ستجدها مكررة مرتين في الكود غيرهم بمعرف صفحتك على الفيس بوك ثم احفظ الأداة وحركها في أي مكان تريده على مدونتك ويمكنك التحكم في أبعاد صندوق الاعجاب من خلال تغيير العرض والارتفاع في الكود ليتناسب مع مدونتك إذا كنت مبتدأ في بلوجر قد يفيدك هذا الموضوع في كيفية تركيب الأداة بالصور إضافة اداة المواقع الاجتماعية لمدونة بلوجر بشكل رائع ومتحرك وجذاب  دمتم في أمان الله   ولا تنسونا من صالح دعائكم قسم / شروحات ومواقع (بلوجر أدسنس يوتيوب الربح)

nahrelma3refa

2:06 م

اقرأ المزيد

كيفية إضافة عداد زوار مدونات بلوجر مع أعلام الدول وحصر زوار مدونتك

كيفية إضافة عداد زوار مدونات بلوجر مع أعلام بلدان زوار المدونة

السلام عليكم ورحمة الله وبركاته

إن شاء الله نوضح لكم كيفية إضافة هذه الإضافة الجميلة لمدونات بلوجر

والتي تحدد لك زوار مدونتك مع أعلام بلدانهم وبالتالي تعرف أكثر البلدان زيارة لمدونتك وقد يساعدك هذا أيضا في استهداف أكثر للبلدان الأكثر زيارة لمدونتك

نبدأ بسم الله

أولا :

ندخل على هذا الرابط من هنا flagcounter
ثم نتبع الخطوات التالية كما بالصور

لمشاهدة الصور بحجمها الكامل افتحها في نافذة جديدة

ثانيا :
نجري التعديلات على الأداة ونعاينها كما بالشكل
ونضغط على Get your flag counter

ثم نضغط على Skip

ثم ننسخ الكود الأول وهو الخاص بالمواقع والمدونات

أما الكود الثاني فهو خاص بالمنتديات

ثالثا :
ثم بعد نسخ الكود

اذهب للوحة تحكم مدونتك ومن ثم إلى التخطيط

ثم إضافة أداة وظيفة طرف ثالث HTML/JavaScript

وضع الكود في المربع واحفظ الأداة
وحرك الأداة إلى المكان الذي تريد ظهورها فيه في مدونتك

ومبروك عليك الإضافة
وللمعاينة يمكنكم معاينة الأداة على مدونتي
http://nahrelma3refa.blogspot.com

 دمتم في أمان الله قسم شروحات  ومواقع .. بلوجر أدسنس يوتيوب الربح

mohamed

11:54 م

اقرأ المزيد

إضافة أيقونات مشاركة الموضوع للمواقع الإجتماعية + زر أعجبني للفيس بوك لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

إن شاء الله نقدم لكم اليوم إخواني وأخواتي

إضافة جديدة من إضافات بلوجر يمكنكم إضافة إلى قالب المدونة بسهولة

وهي إضافة أيقونات مشاركة الموضوع على المواقع الاجتماعية فيس بوك ، تويتر ، جوجل بلس ، غيرها الكثير والكثير + أيقونة أعجبني للفيس بوك

كي تسهل لك وللزائر مشاركة أي موضوع على المواقع الاجتماعية دون الحاجة لنسخ الرابط ووضعه في المواقع الإجتماعية والتسهيل لمستخدمي الفيس بوك بالاعجاب بالموضوع من داخل المدونة بكل سهولة

نبدأ بسم الله

أولا :

وقبل كل شيء بما أننا سنضيف الأداة داخل القالب

فيراعى قبل أي شيء أخذ نسخة احتياطية من القالب لتفادي أي مشاكل قد تحدث

ثانيا :

اذهب الى لوحة تحكم المدونة ومن ثم إلى قالب ثم تحرير HTML

ثم قم بالبحث داخل القالب عن هذا الكود

<data:post.body/>

ستجد أكثر من واحد اختر الكود الثاني وذلك لتفادي ظهور الأيقونات أسفل المواضيع في الصفحة الرئيسية

ثم ضع أسفل منه مباشرة هذا الكود التالى كما بالشكل

<span class='st_facebook_vcount' displayText='Facebook'></span> <span class='st_fblike_vcount' displayText='Facebook Like'></span> <span class='st_twitter_vcount' displayText='Tweet'></span> <span class='st_googleplus_vcount' displayText='Google +'></span> <span class='st_email_vcount' displayText='Email'></span>

ثالثا : ثم قم بالبحث عن الكود التالي <head> وضع بعده مباشرة هذا الكود التالى كما بالشكل

<script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "8754ee54-f61d-41a3-82b5-6c74d5f8c83c", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

ومبروك عليكم الإضافة أرجو أن تعجبكم إن شاء الله  دمتم في أمان الله بلوجر أدسنس يوتيوب الربح شروحات ومواقع

mohamed

11:35 م

اقرأ المزيد

إضافة أداة المتواجدون الآن (الخرائط السداسية) Revolver Maps لمدونات بلوجر بسهولة تامة

إضافة أداة المتواجدون الآن (الخرائط السداسية) Revolver Maps لمدونات بلوجر بسهولة تامة

السلام عليكم ورحمة الله وبركاته

إن شاء الله نقدم لكم اليوم إخواني وأخواتي الكرام
إضافة أداة جميلة ومميزة لمدونات بلوجر

وهي أداة تعرف باسم المتواجدون الآن واسمها Revolver Maps

والتي تبين عدد الزوار المتواجدين في مدونتك وقت تصفحك من جميع بلدان العالم

أي أنها إحصائية مباشرة لزوار المدونة المتواجدين في وقت واحد كما تراه بالمنتديات

الأداة سهلة جدا وتركيبها أسهل

نبدأ الشرح بسم الله

كل ما عليك هو الدخول لموقع revolver maps من هنا

ثم اضغط كما بالشكل على Widget Gallery

لمشاهدة الصور بحجمها الكامل افتحها في نافذة جديدة

ثم اختر شكل الاداة الذي تريده يوجد أدوات عديدة
ثم اضغط على !Get this Widget

عدل على الشكل كما بالشرح حسب رغباتك وتناسق الألوان مع مدونتك

ثم انسخ الكود بعد الانتهاء من التعديل كما بالشكل

بعد ذلك اذهب للوحة تحكم مدونتك ومن ثم إلى التخطيط

ثم إضافة أداة وظيفة طرف ثالث HTML/JavaScript

وضع الكود في المربع
واضغط حفظ

ومبروك عليك الإضافة
قد يفيدك هذا الموضوع بهذا الشأن
إضافة اداة المواقع الاجتماعية لمدونة بلوجر بشكل رائع ومتحرك وجذاب

ولمن أراد الإضافة بأبعاد وألوان جاهزة هذا هو كود الأداة
الصقه مباشرة في خانة الكود بعد إضافة أداة HTML/JavaScript
ويمكنك تغيير الألوان والأبعاد داخل الكود

<script type="text/javascript" src="http://jk.revolvermaps.com/2/1.js?i=agbdvr52azl&s=250&m=0&v=false&r=false&b=000000&n=false&c=ff0000" async="async"></script>

أرجو أن تعجبكم الأداة إن شاء الله

 دمتم في أمان الله  ولا تنسونا من صالح دعائكم بلوجر أدسنس يوتيوب الربح شروحات ومواقع

mohamed

6:37 ص

اقرأ المزيد

إضافة زر الصعود لأعلى لمدونة بلوجر بسهولة وبسرعة بشكل جميل وبطريقتين مختلفتين

إضافة زر الصعود لأعلى لمدونة بلوجر بسهولة وبسرعة
بشكل جميل وبطريقتين مختلفتين

السلام عليكم ورحمة الله وبركاته

إن شاء الله إخواني وأخواتي الكرام نوضح لك كيفية إضافة اداة مهمة جدا لمدونات بلوجر من أجل تصفح أسهل لزوار المدونة والتنقل داخل الموضوع خصوصا إن كان طويلا أو الصعود للقائمة الرئيسية بسرعة

وبالتالي تقلل الملل وتسهم في وجود الزوار لفترة أكبر في مدونتك

وهي أداة الصعود المباشر لأعلى المدونة

وحتى لا أطيل فتركيب الاداة سهل جدا ولا يأخذ وقتا منك

نبدأ بسم الله

(أولاً) 
قم بحفظ نسخة من قالبك لتفادي أي أخطاء قد تواجهك .. مهم جدا

(ثانياً)

اذهب إلى قالب المدونة ومن ثم الى تحرير html ثم اضغط داخل القالب ومن الكيبورد اضغط ctrl+f

وابحث عن الكود التالي

</body>

ثم اضف قبله هذا الكود التالي

<a href='#' id='backtotop'><img alt='back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwO2rlMEhFvNuPQdhr8MEsXJND3tULW9v8DU5JQQLwyskm0yZGnZssDXZGlpLWdMHBeulB7wo6HLbgY9oqLZoLQx-K-FljfweQOlgIOwfuBjpiG1No0HfyL5Bz8e6r_PU7ji-OcNpbrbdc/s1600/9.png'/></a>

<script type='text/javascript'>

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=4;

var numshowpage=6;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

</script>

إذا أردت تغيير شكل الأيقونة غير ما باللون الأحمر برابط الصورة المراد وضعها
لمشاهدة الصورة بحجمها الطبيعي قم بالضغط عليها

(ثالثاً)
ثم ابحث عن الكود التالي

]]></b:skin>

واضف قبله هذا الكود

#backtotop {

padding:5px;

position:fixed;

bottom:5px;right:5px;

cursor:pointer;

}

 هذه الأداة تكون في الجهة اليمنى فإذا أردتها بالجهة اليسرى غير
left إلى right

لمشاهدة الصورة بحجمها الطبيعي قم بالضغط عليها

بهذا تكون قد أضفت الأداة بنجاح بإذن الله


أما الطريقة الثانية للإضافة 
وهي أسهل بكثير مما سبقت
فما عليك هو أن تذهب للوجة تحكم مدونتك ثم تختار التخطيط 
ثم تختار إضافة أداة ومن ثم إضافة وظيفة طرف ثالث HTML/JavaScript 
ثم تنسخ الكود التالي وتضعه في مربع أكواد الأداة
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" > /*********************************************** * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Modified by www.helperblogger.com * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com for full source code ***********************************************/ var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizFdZJbGa9s21mp_6G1UXvrJJgr8TxxmHt1c2L9_-FfjNxFss5nW0OO0HAaU7AAZPOPOE7Zaw0X8gKfu5_TuT4_nkWya5PU9eNlh4hV8-Jg5mTYW8Chjcu6NrIcB7eH1rgEuHRxRWNN5oM/s1600/%D8%B2%D8%B1+%D8%A7%D9%84%D8%B5%D8%B9%D9%88%D8%AF+%D9%84%D8%A3%D8%B9%D9%84%D9%89.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol"> '+mainobj.controlHTML+'</div> ') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script> ثم احفظ الأداة ويمكنك أيضا تغيير الصورة الموجودة بالأداة بأي صورة تحب
وبهذا تمت الإضافة


وللمزيد من الأشكال لهذه الأداة إليكم بعض هذه الأشكال حسب الرغبة
فقط افتح أي صورة من هذه في نافذة مستقلة وانسخ الرابط واستبدله

   

أرجو تكون فيها الإفادة لكم إن شاء الله

 دمتم في أمان الله
قسم / شروحات ومواقع (بلوجر وادسنس ويوتيوب والربح)

mohamed

9:22 م

اقرأ المزيد

إضافة الفقاعات المتحركة مع الماوس لمدونة بلوجر بشكل رائع وجذاب

إضافة الفقاعات المتحركة مع الماوس لمدونة بلوجر بشكل رائع وجذاب

السلام عليكم ورحمة الله وبركاته

إن شاء الله ‘خواني وأخواتي الكرام

نقدم لكم اليوم هذه الإضافة الجميلة لمدونة بلوجر ألا وهي 

الفقاعات المتحركة مع الماوس

والتي تضفي حركة وجمالا للمدونة مما يجعل الزائر مستمتعا بوجوده في المدونة حيث أن الكثيرين يحبون الأدوات المتحركة

وحتي لا أطيل عليكم

نبدأ بسم الله

تركيبها سهل جدا 

أولا اذهب إلى لوحة تكم المدونة ومن ثم إلى التخطيط

ثم إضافة أداة وظيفة طرف ثالث HTML/JavaScript

ثم انسخ الكود التالي في المربع

<script type="text/javascript"> var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung var bubbles=100; // jumlah maksmal gelembung var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array(); window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid "+colours[3]; div.borderRight="1px solid "+colours[1]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="0px"; div.left="1px"; div.right="1px"; div.bottom="0px" div.borderTop="1px solid "+colours[0]; div.borderBottom="1px solid "+colours[2]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.left="1px"; div.right="1px"; div.bottom="1px"; div.top="1px"; div.backgroundColor=colours[4]; div.opacity=0.5; if (document.all) div.filter="alpha(opacity=50)"; document.body.appendChild(rats); bubb[i]=rats.style; } set_scroll(); set_width(); bubble(); }} function bubble() { var c; if (x!=ox || y!=oy){ ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); } function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>0) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sleft; x=(e)?e.pageX:event.x+sdown; } window.onresize=set_width; function set_width() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } } window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; return (div); } </script> ضع الكود في المرعب الأداة ثم احفظ الأداة

ومبروك عليك شكل الماوس الجميل

إذا كنت مبتدأ قد يفيدك هذا الموضوع وبه شرح تركيب الأدوات بالصور
إضافة اداة المواقع الاجتماعية لمدونة بلوجر بشكل رائع ومتحرك وجذاب

 دمتم في أمان الله

بلوجر أدسنس يوتيوب الربح شروحات ومواقع

mohamed

2:40 م

اقرأ المزيد